<template>
  <view class="pace-selector">
    <view class="race-type-tabs">
      <view 
        class="tab" 
        :class="{ active: raceType === 'half' }" 
        @click="changeRaceType('half')"
      >
        半程马拉松
      </view>
      <view 
        class="tab" 
        :class="{ active: raceType === 'full' }" 
        @click="changeRaceType('full')"
      >
        全程马拉松
      </view>
    </view>
    
    <view class="preset-times">
      <text class="section-title">预设完赛时间</text>
      <view class="time-options">
        <view 
          v-for="(time, index) in presetTimes" 
          :key="index"
          class="time-option" 
          :class="{ active: selectedTime === time.value }"
          @click="selectTime(time.value)"
        >
          {{ time.label }}
        </view>
      </view>
    </view>
    
    <view class="custom-time">
      <text class="section-title">自定义完赛时间</text>
      <view class="time-picker-container">
        <picker-view
          class="time-picker"
          :value="[hoursIndex, minutesIndex, secondsIndex]"
          @change="onTimePickerChange"
          :indicator-style="'height: 40px;'"
          :circular="true"
        >
          <picker-view-column>
            <view class="picker-item" v-for="hour in hoursRange" :key="hour">
              {{ hour.toString().padStart(2, '0') }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="minute in minutesRange" :key="minute">
              {{ minute.toString().padStart(2, '0') }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="second in secondsRange" :key="second">
              {{ second.toString().padStart(2, '0') }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPresetTimes } from '../utils/calculator.js';

export default {
  name: 'PaceSelector',
  data() {
    return {
      raceType: 'half', // 'half' 或 'full'
      presetTimes: [],
      selectedTime: '',
      hours: '02',
      minutes: '00',
      seconds: '00',
      hoursRange: Array.from({ length: 13 }, (_, i) => i),
      minutesRange: Array.from({ length: 60 }, (_, i) => i),
      secondsRange: Array.from({ length: 60 }, (_, i) => i),
      hoursIndex: 2,
      minutesIndex: 0,
      secondsIndex: 0
    };
  },
  created() {
    this.presetTimes = getPresetTimes(this.raceType);
    this.selectedTime = this.presetTimes[2].value; // 默认选择2小时
    this.updateTimeInputs(this.selectedTime);
  },
  methods: {
    changeRaceType(type) {
      this.raceType = type;
      this.presetTimes = getPresetTimes(type);
      // 切换赛程类型时，选择默认时间
      this.selectedTime = this.presetTimes[2].value;
      this.updateTimeInputs(this.selectedTime);
      this.$emit('race-type-change', type);
      this.$emit('time-change', this.selectedTime);
    },
    selectTime(timeValue) {
      this.selectedTime = timeValue;
      this.updateTimeInputs(timeValue);
      this.$emit('time-change', timeValue);
    },
    updateTimeInputs(timeString) {
      const [h, m, s] = timeString.split(':');
      this.hours = h;
      this.minutes = m;
      this.seconds = s;
      this.hoursIndex = parseInt(h);
      this.minutesIndex = parseInt(m);
      this.secondsIndex = parseInt(s);
    },
    onTimePickerChange(e) {
      const values = e.detail.value;
      this.hoursIndex = values[0];
      this.minutesIndex = values[1];
      this.secondsIndex = values[2];
      
      this.hours = this.hoursRange[values[0]].toString().padStart(2, '0');
      this.minutes = this.minutesRange[values[1]].toString().padStart(2, '0');
      this.seconds = this.secondsRange[values[2]].toString().padStart(2, '0');
      
      const timeString = `${this.hours}:${this.minutes}:${this.seconds}`;
      this.selectedTime = timeString;
      this.$emit('time-change', timeString);
    }
  }
};
</script>

<style>
.pace-selector {
  padding: 20rpx;
}

.race-type-tabs {
  display: flex;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  overflow: hidden;
  border: 1px solid #007AFF;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  background-color: #fff;
  color: #007AFF;
}

.tab.active {
  background-color: #007AFF;
  color: #fff;
}

.section-title {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  display: block;
  color: #333;
}

.time-options {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.time-option {
  width: 30%;
  text-align: center;
  padding: 15rpx 0;
  margin: 0 1.66% 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.time-option.active {
  background-color: #007AFF;
  color: #fff;
}

.time-picker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
}

.time-picker-container::after {
  content: "ikun制作";
  position: absolute;
  top: -60rpx;
  right: 20rpx;
  font-size: 36rpx;
  color: rgba(0, 122, 255, 0.2);
  font-style: italic;
  z-index: 999;
  transform: rotate(-15deg);
}
.time-picker {
  width: 100%;
  height: 200rpx;
  background-color: #fff;
  border-radius: 10rpx;
  border: 1px solid #eee;
}

.picker-item {
  line-height: 40rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}
</style>